<template>
  <div>
    <a-modal
      centered
      title="编辑已付成本"
      v-model="visible"
      :width="600"
      :footer="null"
      @cancel="onCancel"
    >
      <a-timeline v-if="costData.length != 0">
        <a-timeline-item v-for="item in costData" :key="item.id">
          <p>【{{item.payment_time}}】</p>
          <p>【{{item.company}}】【{{item.username}}】支付了【{{item.cost_fee}}】元 <a-button icon="delete" type="link" size="small" @click="getDelPaid(item.id)">删除</a-button></p>
        </a-timeline-item>
      </a-timeline>
      <a-empty description="暂未任何成本支出" v-else />
      <a-divider />
      <div style="text-align:right">
        <a-button size="small" icon="plus" type="danger" @click="addPaidOfficial">添加记录</a-button>
      </div>
    </a-modal>
    <a-modal
      centered
      v-model="visible1"
      title="添加已付成本"
      @ok="onSubmitPaid"
      :width="280"
    >
      <a-form-model
        ref="officialForm"
        :model="costForm"
      >
        <a-form-model-item label="成本" prop="amount">
          <a-input-number
            placeholder="请输入已付成本"
            v-model="costForm.cost_fee"
            style="width:100%"
            :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="value => value.replace(/\$\s?|(,*)/g, '')"
          >
          </a-input-number>
          <a-form-model-item label="付款时间">
            <a-date-picker style="width:100%" @change="onChange" />
          </a-form-model-item>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { getEditPaid, postEditPaid, getDelPaid } from '@/api/contract'

export default {
  props: {
    businessId: {
      type: String,
      default: ''
    }
  },
  name: 'PaidOfficial',
  data () {
    return {
      visible: true,
      visible1: false,
      costData: [],
      costForm: {},
      paymentTime: null
    }
  },
  created () {
    this.getPaidCost(this.businessId)
  },
  methods: {
    getPaidCost (id) {
      getEditPaid(id).then(res => {
        this.costData = res.result.data
      })
    },
    getDelPaid (id) {
      this.$confirm({
        title: '是否需要删除',
        onOk: () => {
          getDelPaid(id).then(res => {
            this.onCancel()
          })
        }
      })
    },
    addPaidOfficial () {
      this.costForm = {}
      this.costForm['cb_id'] = this.businessId
      this.visible1 = true
    },
    onSubmitPaid () {
      const app = this
      const data = app.costForm
      postEditPaid(data).then(res => {
        if (res.status === 0) {
          app.visible1 = false
          this.onCancel()
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    onCancel () {
      this.visible = false
      this.$emit('cancel', this.visible)
    },
    onChange (date, dateString) {
      this.costForm.payment_time = dateString
    }
  }
}
</script>

<style scoped>

</style>
